<template>
    <div class="appointmentList">
        <searchBoxPax
            :searchform="searchform"
            :search_type_data="search_type_data"
            @cheSelectvalue="cheSelectvalue"
            @searchFun="searchList"
            @showSelectFun="showSelectFun"
            ref="searchBoxPax"
        ></searchBoxPax>
        <div class="select-custom-box">
            <selectCustom
                ref="selectCustom0"
                :option_list="confirm_ls"
                :select_id="searchform.ch"
                @cheOptionvalue="cheOptionvalue($event, '0')"
                @openSelect="openSelect('0')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom1"
                :option_list="shop_ls_data"
                :select_id="searchform.shopid"
                @cheOptionvalue="cheOptionvalue($event, '1')"
                @openSelect="openSelect('1')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom2"
                :option_list="worker_ls_data"
                :select_id="searchform.staffid"
                @cheOptionvalue="cheOptionvalue($event, '2')"
                @openSelect="openSelect('2')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom3"
                :option_list="group_data"
                :select_id="searchform.group"
                @cheOptionvalue="cheOptionvalue($event, '3')"
                @openSelect="openSelect('3')"
            ></selectCustom>
        </div>
       
        <div
            class="info-list-box"
            v-infinite-scroll="loadFun"
            v-if="list_data.length > 0"
        >
            <div
                class="info-list-row"
                :class="item.acitve ? 'acitve' : ''"
                v-for="(item, index) in list_data"
                :key="index"
                @click="getDetailFun(item.bookid)"
            >
                <div class="info-box">
                    <div class="name-info">
                        <div class="name-box-info">
                            <div
                                class="name-box"
                                v-if="
                                    item.customer_info.name ||
                                    item.customer_info.company ||
                                    item.customer_info.cellphone
                                "
                            >
                                <span
                                    class="name"
                                    v-if="item.customer_info.name"
                                    >{{ item.customer_info.name }}</span
                                ><span
                                    class="name"
                                    v-if="item.customer_info.company"
                                    >{{ item.customer_info.company }}</span
                                ><span
                                    class="phone"
                                    v-if="item.customer_info.cellphone"
                                    >{{ item.customer_info.cellphone }}</span
                                >
                            </div>
                            <div class="name-box" v-else>
                                <span>暂无对应客户信息</span>
                            </div>
                            <div class="status-box">
                                {{ item.status_txt }}
                            </div>
                        </div>
                    </div>
                    <div class="info-der-box">
                        <div class="info-der">
                            <div class="order-info">
                                <div class="order-1">
                                    <span>{{ item.no }}</span>
                                    <span
                                        v-if="activeName != 2"
                                        class="donetime"
                                        >{{ item.donetime_txt }}</span
                                    >
                                </div>
                                <div class="order-2">
                                    <span>门店：{{ item.shop_name }}</span
                                    ><span
                                        >服务人：{{
                                            item.staff_info.name
                                        }}</span
                                    ><span>次数：{{ item.serv_qty_book }}</span>
                                </div>
                                <div class="order-3">
                                    <span
                                        >时间：{{
                                            `${item.h_from_txt} - ${item.h_to_txt}`
                                        }}</span
                                    >
                                </div>
                                <div
                                    class="order-4"
                                    v-if="activeName == 5 && item.remark_info"
                                >
                                    <el-rate
                                        v-model="item.remark_info.score"
                                        disabled
                                    >
                                    </el-rate>
                                    <span>{{
                                        item.remark_info.score_txt
                                    }}</span>
                                </div>
                            </div>
                            <div class="good-info">
                                <div
                                    class="good-info-row"
                                    v-for="(
                                        good_item, good_index
                                    ) in item.pro_list"
                                    :key="good_index"
                                >
                                    <div class="img-box">
                                        <img
                                            :src="
                                                good_item.img_small
                                                    ? good_item.img_small
                                                    : img_buf
                                            "
                                        />
                                    </div>
                                    <div class="content-box">
                                        <div class="title">
                                            <span>{{ good_item.title }}</span>
                                        </div>
                                        <div class="doc">
                                            <span>{{
                                                good_item.txt_title
                                            }}</span>
                                        </div>
                                        <div class="num">
                                            <span
                                                >次数{{
                                                    good_item.serv_qty
                                                }}次</span
                                            ><span
                                                >单价{{
                                                    good_item.serv_price
                                                }}元</span
                                            ><span
                                                >剩次{{
                                                    good_item.serv_left
                                                }}次</span
                                            ><span
                                                >共{{
                                                    good_item.serv_qty_total
                                                }}次</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
             
                    </div>
                </div>
            </div>
        </div>
        <empty v-else />
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import empty from "../comm/empty.vue";
import searchBoxPax from "../comm/searchBoxPax.vue";
import selectCustom from "../comm/selectCustom.vue";

export default {
    components: { empty, searchBoxPax, selectCustom },
    props: [
        "searchform",
        "list_data",
        "shop_ls_data",
        "worker_ls_data",
        "group_data",
        "search_type_data",
        "activeName",
        "confirm_ls",
    ],
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
        };
    },
    methods: {
        getDetailFun(id) {
            this.$emit("getDetailFun", id);
        },
        searchList() {
            this.$emit("searchList");
        },
        changeList() {
            this.$emit("changeList");
        },
        loadFun() {
            this.$emit("loadFun");
        },
        cheSelectvalue(id) {
            this.$emit("cheSelectvalue", id);
        },
        showSelectFun() {
            this.$refs.selectCustom1.is_select_show = false;
            this.$refs.selectCustom2.is_select_show = false;
            this.$refs.selectCustom3.is_select_show = false;
        },
        cheOptionvalue(item, type) {
            this.$emit("cheOptionvalue", item, type);
        },
        openSelect(type) {
            for (let i = 1; i < 4; i++) {
                if (i != type) {
                    this.$refs[`selectCustom${i}`].is_select_show = false;
                }
            }
        },
    },
};
</script>


<style lang="scss" scoped>
.appointmentList {
    width: 345px;
    position: relative;
    .select-custom-box {
        padding: 7.5px 0;
        background: #f3f3f2;
        display: flex;
        justify-content: space-around;
    }
    ::v-deep.search-box {
        .el-form {
            display: flex;
        }
        .sele-w {
            width: 100px;
            margin-right: 10px;
        }
        .input-w {
            width: 300px;
            margin-right: 10px;
        }
    }
    ::v-deep.search-box-select {
        .el-form {
            display: flex;
        }
        .sele-w {
            margin-right: 10px;
        }
    }

    .info-list-box {
        height: 690px;
        overflow: auto;
        // padding-right: 5px;

        .info-list-row {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px #e8dcdc solid;
            padding-top: 10px;
            cursor: pointer;
            &:last-child {
                // margin-bottom: 0;
                border: none;
            }
            &:hover {
                background: #f8f8f8;
            }
            &.acitve {
                background: #f8f8f8;
            }
            .info-box {
                width: 100%;
                .name-box-info {
                    width: 100%;
                    .name-box {
                        width: 233px;
                    }
                    display: flex;
                    justify-content: space-between;
                    .status-box {
                        color: #3388ff;
                    }
                }
                .name-info {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    padding: 0 10px;
                    .name {
                        margin-right: 10px;
                    }
                    .phone {
                    }
                }
                .info-der-box {
                    display: flex;
                    justify-content: space-between;
                    .info-der {
                        width: 100%;
                        .order-info {
                            padding: 10px;
                            font-size: 12px;
                            // border-top: 1px #e8dcdc solid;
                            // border-bottom: 1px #e8dcdc solid;

                            .order-1 {
                                margin-bottom: 5px;
                                display: flex;
                                justify-content: space-between;

                                .donetime {
                                    color: #b2b2b2;
                                }
                            }
                            .order-2 {
                                margin-bottom: 5px;
                                span {
                                    margin-right: 10px;
                                }
                            }
                            .order-3 {
                                margin-bottom: 5px;
                                span {
                                }
                            }
                            .order-4 {
                                display: flex;
                                align-items: center;
                                margin-bottom: 10px;
                            }
                        }
                        .good-info {
                            padding: 10px 0;
                            padding-top: 0;
                            .good-info-row {
                                display: flex;
                                margin-bottom: 10px;
                                padding: 0 10px;
                                &:last-child {
                                    margin-bottom: 0;
                                }
                                .img-box {
                                    width: 80px;
                                    height: 80px;
                                    margin-right: 10px;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        border-radius: 5px;
                                    }
                                }
                                .content-box {
                                    width: calc(100% - 90px);
                                    div {
                                        margin-bottom: 5px;
                                    }
                                    .title {
                                        font-size: 16px;
                                        span {
                                        }
                                    }
                                    .doc {
                                        font-size: 12px;
                                        color: #b2b2b2;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                    }
                                    .num {
                                        font-size: 12px;
                                        span {
                                            margin-right: 10px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .operation {
                        width: 100px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .but-box {
                            div {
                                margin-bottom: 10px;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
    .info-list-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .info-list-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .info-list-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }
}
</style>
